<template>
  <div>
    <ul class="flow-chart">
      <li v-for="(processItem,indexP) in processList">
        <div class="circle color0" v-if=" indexP%4 == 0"></div>
        <div class="circle color1" v-if=" indexP%4 == 1"></div>
        <div class="circle color2" v-if=" indexP%4 == 2"></div>
        <div class="circle color3" v-if=" indexP%4 == 3"></div>
        <div v-for="(processItemChild,indexC) in processItem" class="content">
          <div class="con-title clearfix">
            <span class="name0" v-if="indexC == 0">{{processItemChild.emplName}}</span>
            <span class="name1" v-else="">{{processItemChild.emplName}}</span>
            <span class="level">{{processItemChild.descr}}</span>
          </div>
          <div class="cont-main clearfix">
            <div class="comment">
              <span>{{processItemChild.lastupddttm}}</span>
            </div>
          </div>
          <div class="process-container" v-if="type == 'performancePlan'">
            <img v-if="processItemChild.cStepStatus == 'A010'" class="process-img" src="../../schedule/images/procedure/未审批.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'A020'" class="process-img" src="../../schedule/images/procedure/待审批.png" alt="">
            <img v-if="processItemChild.cStepStatus == '0030'" class="process-img" src="../../schedule/images/process/02.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'A030' || (processItemChild.cStepStatus == 'B030')" class="process-img" src="../../schedule/images/after-approve.png" alt="">
          </div>
          <div class="process-container" v-else-if="type == 'performanceAssess'">
            <img v-if="processItemChild.cStepStatus == 'B010'" class="process-img" src="../../schedule/images/u1347.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'B020'" class="process-img" src="../../schedule/images/u1527.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'B030'" class="process-img" src="../../schedule/images/u1345.png" alt="">
          </div>
          <div class="process-container" v-else-if="type == 'performanceInterview'">
            <!-- 根据cStepStatus来判断，N	未面谈  P	待面谈 A	已面谈 -->
            <img v-if="processItemChild.cStepStatus == 'N'" class="process-img" src="../../schedule/images/NotInterviewed.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'P'" class="process-img" src="../../schedule/images/WaitingInterview.png" alt="">
            <img v-if="processItemChild.cStepStatus == 'A'" class="process-img" src="../../schedule/images/Interviewed.png" alt="">
          </div>
          <div class="process-container" v-else="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'A'" src="../image/procedure/01.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'B'" src="../image/procedure/02.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'D'" src="../image/procedure/03.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'N'" src="../image/procedure/08.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'J'" src="../image/procedure/09.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'P'" src="../image/procedure/04.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'R'" src="../image/procedure/05.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'T'" src="../image/procedure/06.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'S'" src="../image/procedure/07.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'UR'" src="../image/procedure/待阅.png" alt="">
            <img class="process-img" v-if="processItemChild.cStepStatus === 'AR'" src="../image/procedure/已阅.png" alt="">
          </div>
          <div class="time clearfix">
            <span>{{processItemChild.comments}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getCompensateProcess, getPerformancePlanMap, perresultIntrvwPlanMap } from "../../../api/api";
export default {
  mounted() {
    //加载流程图信息
    //流程图信息
    if (this.type == "performancePlan" || this.type == "performanceAssess" || this.type == "performanceInterview") {
      this.getPerformancePlanMapFunc();
      return;
    }
    this.getProcessInfo();
  },
  props: {
    type: {
      type: String
    },
    docid: {
      type: String
    },
    version: {
      type: String
    },
    epPhase: {
      type: String
    },
    transNum: {
      type: String
    },
    loginOprid:{
      type:String
    }
  },
  data() {
    return {
      //流程图信息
      processList: []
    };
  },
  methods: {
    getProcessInfo() {
      let params = {
        transNum: this.transNum,
        loginOprid:this.loginOprid
      };
      getCompensateProcess(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            this.processList = res.retData;
            console.log(this.processList);
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    getPerformancePlanMapFunc() {
      let params = {
        docid: this.docid,
        version: this.version,
        epPhase: this.epPhase
      };
      let foo;
      if(this.type == "performanceInterview") {
        foo = perresultIntrvwPlanMap;
      } else {
        foo = getPerformancePlanMap;
      }
      foo(params)
        .then(res => {
          if (res && res.retCode === "000000") {
            this.processList = res.retData;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    }
  }
};
</script>
<style type="text/scss" lang="scss">
ul.flow-chart {
  margin-top: 20px;
  margin-left: 20px;
  clear: both;
  height: auto;
  background: url(../../userInfo/image/rongyu_bg.jpg) 6px 50px repeat-y;
  li {
    margin-top: 16px;
  }
  .circle {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .color0 {
    background: #07bc4b;
  }
  .color1 {
    background: #16a8e7;
  }
  .color2 {
    background: #ff6633;
  }
  .color3 {
    background: #ffff00;
  }
  .content {
    position: relative;
    min-height: 90px;
    .con-title {
      margin-right: 86px;
      text-align: left;
      .name0 {
        color: #333;
        display: block;
        font-weight: 700;
        float: left;
        margin-left: 5px;
      }
      .name1 {
        color: #333;
        display: block;
        font-weight: 700;
        float: left;
        margin-left: 17px;
      }
      .level {
        margin-left: 16px;
        width: 160px;
        float: right;
      }
      @media screen and (max-width: 374px) {
        .level {
          width: 130px;
        }
      }
    }
    .cont-main {
      margin: 0px 10px 0 17px;
      .comment {
        text-align: left;
        float: left;
        width: 260px;
        margin-top: 16px;
        margin-bottom: 16px;
        word-break: break-all;
      }
      @media screen and (max-width: 374px) {
        .comment {
          width: 200px;
        }
      }
    }
    .process-container {
      position: absolute;
      right: 10px;
      top: 50%;
      margin-top: -11px;
    }
    .process-img {
      width: 60px;
      height: 54px;
    }
  }
  .time {
    width: 260px;
    margin-left: 17px;
    text-align: left;
  }
  @media screen and (max-width: 374px) {
    .time {
      width: 200px;
    }
  }
}
</style>
